import { Component } from 'react'
import { Layout, Menu, Button } from 'antd'
import Content from './Content'
import { PlusOutlined } from '@ant-design/icons'

/**
 * @author guankongjin
 * @description 角色列表
 */
const { Sider } = Layout;

const rolesData = [
  { personaId: 'Admin', personaName: '超级管理员' },
  { personaId: 'Root', personaName: '管理员' }
];

export default class Persona extends Component {
  state = {
    selectId: 0
  }
  menuHandle = (e: any) => {
    this.setState({
      selectId: e.key
    })
  }

  render() {
    const selectData = rolesData.slice(this.state.selectId)[0]
    return (
      <Layout className='site-page'>
        <Sider width={260} className="site-page-fit">
          <Button type='primary' ghost icon={<PlusOutlined />} style={{
            margin: '20px 0',
            width: '70%'
          }}>
            新建角色
          </Button>
          
          <Menu
            mode="inline"
            defaultSelectedKeys={['0']}
            onClick={this.menuHandle}
          >
            {
              rolesData.map((data, index) => {
                return (
                  <Menu.Item key={index}>
                    [{data.personaId}]{data.personaName}
                  </Menu.Item>
                )
              })
            }
          </Menu>
        </Sider>
        <Content {...selectData} />
      </Layout>
    )
  }
}
